<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .tips {
            font-size: 12px;
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <input id="app"/>
    <div class="tips">
        密码强度低
    </div>
    <script>
        const passwordStrengthRegex = {
            num: /^[0-9]+$/,
            low: /^[a-z]+$/,
            upp: /^[A-Z]+$/,
            medium: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/,
            high: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,}$/,
            extreme: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s])(?!.*(password|123456|qwerty|abc123|admin|welcome).*)[A-Za-z\d\W]{12,}$/i
        };

        let app = document.getElementById('app');
        let tips = document.getElementsByClassName('tips')[0];
        app.oninput = function () {
            let inputVal = app.value;

            if (!inputVal.length) {
                tips.style.display = 'none';
                return;
            }

            if (passwordStrengthRegex.low.test(inputVal)||passwordStrengthRegex.num.test(inputVal)||passwordStrengthRegex.upp.test(inputVal)) {
                tips.style.display = 'block';
                tips.innerHTML = '密码强度低';
                tips.style.color = 'red';
            } else if (passwordStrengthRegex.medium.test(inputVal)) {
                tips.style.display = 'block';
                tips.innerHTML = '密码强度中';
                tips.style.color = 'yellow';
            } else if (passwordStrengthRegex.high.test(inputVal)) {
                tips.style.display = 'block';
                tips.innerHTML = '密码强度高';
                tips.style.color = 'blue';
            } else if (passwordStrengthRegex.extreme.test(inputVal)) {
                tips.style.display = 'block';
                tips.innerHTML = '密码强度极强';
                tips.style.color = 'green';
            }else {
                tips.style.display = 'block';
                tips.innerHTML = '不符合规则的密码';
                tips.style.color = 'black';
            }
        }
    </script>
</body>
</html>